// 生物详细信息数据
const speciesData = {
  'capybara': {
    name: '水豚',
    scientific: 'Hydrochoerus hydrochaeris',
    image: 'image/capybara.jpeg',
    description: '水豚是世界上最大的啮齿动物，成年个体体重可达50公斤以上。它们性格温顺，是半水栖动物，主要分布在南美洲的河流、湖泊和沼泽地区。水豚是高度社会化的动物，通常以5-10只的群体生活。',
    features: [
      { title: '体型特征', content: '体长1-1.3米，体重35-66公斤，是世界上最大的啮齿动物' },
      { title: '生活习性', content: '半水栖，优秀的游泳和潜水能力，可在水下停留5分钟' },
      { title: '食性', content: '草食性，主要以水生植物、草类和树皮为食' },
      { title: '社会行为', content: '高度社会化，以群体生活，通过叫声、气味标记交流' }
    ],
    habitat: '水豚是典型的社会性栖息地依赖型动物，其生态习性紧密围绕水域环境展开。作为严格的植食性动物，它们主要以禾本科植物、水生植物以及树皮和果实为食，并会像反刍动物一样进行反刍以充分消化纤维素。水豚是半水生性的杰出代表，其趾间具蹼，善于游泳和潜水，经常在水中躲避天敌（如美洲豹和凯门鳄）或调节体温。它们具有高度群居性，通常以5至10只的群体生活，但在干旱季节资源集中时，可形成超过100只的大群，群体内有复杂的沟通方式，包括哨声、咕噜声和气味标记。此外，它们的繁殖与雨季同步，以确保幼崽在资源丰富时出生，这一策略也体现了其对水生环境变化的精准适应。',
    funFacts: '水豚被称为"自然界最友好的动物"，它们允许其他动物如鸟类、猴子甚至鳄鱼坐在它们背上。在南美洲，水豚有时被当作宠物饲养，但需要大量的水域空间。它们的粪便形状特殊，呈立方体，这有助于它们标记领地时粪便不会滚走。',
    references: [
      "《Mammalian Species》系列中关于水豚（Hydrochoerus hydrochaeris）的专论，详细介绍了其分类、分布、形态、生态和行为。",
      "麦克唐纳主编的《世界哺乳动物手册》，提供了关于水豚食性、社会结构和繁殖生物学的综合信息。",
      "各类行为生态学学术期刊（如《Behavioral Ecology》）中关于水豚社会性、沟通方式和交配策略的研究论文。"
    ]
  },
  'angraecum': {
    name: '长距彗星兰',
    scientific: 'Angraecum sesquipedale',
    image: 'image/angraecum.jpg',
    description: '长距彗星兰是一种原产于马达加斯加的兰花，以其极长的花距而闻名。这种兰花是达尔文进化论的重要例证，它的特殊结构预示了特定传粉者的存在。',
    features: [
      { title: '花朵特征', content: '白色星形花朵，花距长达25-30厘米' },
      { title: '开花时间', content: '冬季开花，花期可持续数周' },
      { title: '传粉机制', content: '依赖特定种类的长舌天蛾传粉' },
      { title: '生长环境', content: '附生在树木上，喜欢温暖湿润的环境' }
    ],
    habitat: '长距彗星兰是达尔文“协同进化”理论的经典范例，其独特的生态习性完全与特定传粉者相适应。这种兰花拥有极长的（可达30厘米以上）的花距，其底部储存着花蜜。它专一性地依赖一种长喙天蛾进行传粉，其花距的长度与蛾类口器的长度完美匹配，形成了其他昆虫无法逾越的机械隔离。该兰花喜欢温暖、湿润和半阴的环境，需要良好的空气流通，通过夜间释放浓郁的香气来吸引远处的传粉者，而其花粉块的精巧结构也确保了只有当天蛾试图吸食花蜜时，才能被其头部特定位置粘附并带走，完成异花授粉。',
    funFacts: '达尔文在1862年看到这种兰花时，预测一定存在一种口器极长的蛾类为其传粉，当时很多人都嘲笑他的想法。41年后，科学家果然发现了这种长舌天蛾，证实了达尔文的预测。这种协同进化是生物学上的经典案例。',
    references: [
      "达尔文于1862年发表的著作《兰花的传粉（On the Various Contrivances by Which British and Foreign Orchids Are Fertilised by Insects）》，其中首次对该兰花的传粉机制做出了开创性预测。",
      "权威学术期刊如《林奈学会生物学杂志（Biological Journal of the Linnean Society）》上发表的后续研究论文，详细阐述了其与长喙天蛾的精确形态和行为关联。",
      "植物学经典著作，如《兰花全书（The Book of Orchids）》或《有花植物手册（The Plant Book）》，均有收录其作为协同进化典范的生态习性描述。"
    ]
  },
  'crested-ibis': {
    name: '朱鹮',
    scientific: 'Nipponia nippon',
    image: 'image/crested-ibis.jpeg',
    description: '朱鹮是东亚特有的珍稀鸟类，被誉为"东方宝石"。它们有着洁白的羽毛和鲜红的面部，姿态优雅。朱鹮曾经濒临灭绝，经过多年的保护努力，种群数量已有所恢复。',
    features: [
      { title: '外观特征', content: '体长约55-80厘米，羽毛洁白，面部和腿部鲜红色' },
      { title: '繁殖习性', content: '一夫一妻制，每年繁殖一次，每次产卵2-4枚' },
      { title: '食性', content: '杂食性，以小鱼、蛙类、昆虫和植物为食' },
      { title: '迁徙行为', content: '部分种群有迁徙习性，其他为留鸟' }
    ],
    habitat: '朱鹮是典型的湿地依赖型珍稀鸟类，其生态习性与特定的森林—湿地复合生态系统紧密相关。它们偏好在水稻田、溪流、浅塘等洁净的浅水湿地中觅食，主要捕食泥鳅、黄鳝、蛙类及水生昆虫等。朱鹮的繁殖习性独具特色，会选择在高大乔木（如松树、栓皮栎）上营巢，形成松散的繁殖群，每窝产卵2-4枚，雌雄亲鸟共同参与孵卵与育雏。其对栖息地环境要求极为苛刻，尤其需要邻近的湿地作为觅食地和高大的树木作为夜宿地与繁殖地，这种对传统农业湿地和老龄树木的依赖，也是其一度濒危的主要原因。',
    funFacts: '朱鹮在日本文化中具有重要地位，被视为"圣鸟"。1981年，全球仅剩下7只野生朱鹮，全部在中国陕西省被发现。经过中国政府和保护组织的不懈努力，目前朱鹮数量已恢复到5000多只。朱鹮的红色面部会在繁殖期变得更加鲜艳。',
    references: [
      "《中国朱鹮》，系统阐述了朱鹮的分布、数量、食性、繁殖等生态生物学特性。",
      "中国《动物学报》、《鸟类学研究》等核心学术期刊中关于朱鹮繁殖行为、觅食生态、栖息地选择及保护生物学的大量研究论文。",
    ]
  },
  'dandelion': {
    name: '蒲公英',
    scientific: 'Taraxacum officinale',
    image: 'image/dandelion.jpeg',
    description: '蒲公英是常见的多年生草本植物，以其独特的绒毛种子和药用价值而闻名。这种植物生命力极强，广泛分布于世界各地的温带地区。',
    features: [
      { title: '形态特征', content: '基生叶莲座状，花茎中空，头状花序金黄色' },
      { title: '繁殖方式', content: '种子繁殖，每个花序可产生上百粒带绒毛的种子' },
      { title: '药用价值', content: '全草入药，有清热解毒、利尿消肿的功效' },
      { title: '食用价值', content: '嫩叶富含维生素，可作野菜食用' }
    ],
    habitat: '蒲公英是典型的多年生杂草，其生态习性以强大的繁殖与扩散能力为核心。它通过高度异花授粉产生有活力的种子，但其最关键的繁殖策略是无融合生殖，即不经受精也能产生胚胎，确保单一植株能迅速建立种群。蒲公英的瘦果冠毛形成独特的“降落伞”结构，使其种子能借助风力进行远距离传播，扩散效率极高。其根系为粗壮的直根，深入土壤，不仅帮助其抵御干旱和践踏，也使其在被切断后能再生，表现出极强的环境适应性与竞争力。此外，其莲座状叶丛的生长策略能有效遮蔽阳光、抑制周边竞争植物，并在温带地区几乎全年开花，从而占据生态演替中的先锋地位。',
    funFacts: '蒲公英的种子可以随风飘散到数公里外，一株蒲公英一年可产生2000多粒种子。在欧洲民间传说中，吹散蒲公英的绒毛可以许愿。蒲公英的根经过烘焙后可以制成咖啡的替代品。有趣的是，蒲公英的花朵实际上是由上百朵小花组成的。',
    references: [
      "《美国植物学杂志（American Journal of Botany）》中关于蒲公英无融合生殖、遗传与进化生物学的研究论文。",
      "权威期刊如《自然（Nature）》或《科学报告（Scientific Reports）》中关于蒲公英种子风力传播的物理机制与空气动力学的研究。",
      "植物学经典著作，如《中国植物志》或《杂草生物学与管理（Weed Biology and Management）》等，对其形态特征、生活史及生态适应性有系统记载与阐述。"
    ]
  },
  'chinese-alligator': {
    name: '扬子鳄',
    scientific: 'Alligator sinensis',
    image: 'image/chinese-alligator.jpeg',
    description: '扬子鳄是中国特有的珍稀鳄类，是世界上体型最小的鳄鱼之一。与其它鳄鱼相比，扬子鳄性情相对温和，主要分布在长江中下游地区。',
    features: [
      { title: '体型特征', content: '体长1.5-2.1米，是世界上体型最小的鳄鱼之一' },
      { title: '生活习性', content: '半水栖，擅长游泳和挖掘洞穴' },
      { title: '食性', content: '肉食性，以鱼类、蛙类、小型哺乳动物为食' },
      { title: '冬眠习性', content: '冬季在洞穴中冬眠，次年春季苏醒' }
    ],
    habitat: '扬子鳄是典型的穴居性淡水鳄类，其生态习性深刻体现了对温带季风气候的适应。作为顶级的肉食动物，它们主要以水生昆虫、鱼类、螺类及小型哺乳动物等为食，食性广泛且随季节和年龄变化。扬子鳄是出色的“生态系统工程师”，其挖掘洞穴的习性至关重要，这些结构复杂的洞穴用于在严寒冬季（冬眠）和炎热夏季（夏蛰）时躲避极端气温。它们通常独居，但会在繁殖季（6月）通过叫声和气味进行沟通，并营建以植物叶片和泥土构成的巢穴用于产卵，其独特的繁殖策略与栖息地水位变化关系密切，这一切都彰显了其对长江中下游湿地环境的生存智慧。',
    funFacts: '扬子鳄是鳄鱼家族中的"活化石"，已在地球上生存了2亿多年。它们会发出多种声音进行交流，包括咆哮、嘶嘶声和幼鳄的特殊叫声。扬子鳄妈妈是爬行动物中少有的会照顾后代的种类，它们会守护巢穴并帮助幼鳄破壳。在中国文化中，扬子鳄被称为"土龙"，被认为具有灵性。',
    references: [
      "《中国扬子鳄研究》（陈壁辉等著）等专著，系统阐述了其形态、分布、食性、繁殖与保护。",
      "《Current Biology》、《Biological Conservation》等国际期刊中关于扬子鳄种群遗传多样性、栖息地选择及保护对策的研究论文。",
      "国内核心期刊如《动物学杂志》、《生态学报》所发表的关于扬子鳄洞穴结构、行为生态学及食性分析的研究报告。"
    ]
  },
  'lithops': {
    name: '生石花',
    scientific: 'Lithops',
    image: 'image/lithops.jpg',
    description: '生石花是多肉植物中的珍品，外形酷似石头，是植物拟态生存的杰出代表。这种奇特的植物原产于南非和纳米比亚的干旱地区，通过伪装成石头来躲避食草动物。',
    features: [
      { title: '外观特征', content: '外形酷似鹅卵石，由一对肥厚的叶片组成' },
      { title: '开花特性', content: '秋季开花，花朵从叶片缝隙中长出' },
      { title: '生长周期', content: '每年蜕皮一次，新叶从老叶中长出' },
      { title: '耐旱能力', content: '极耐干旱，可数月不浇水' }
    ],
    habitat: '生石花是典型的拟态多肉植物，其生态习性是对南非及纳米比亚极端干旱环境的高度适应。它们通常以簇群形式嵌生于石英石砾滩中，通过肥厚的“窗”状叶面进行光合作用，并将自身缩入地表以下以减少蒸腾和防止食草动物啃食。生石花的生长周期与干旱-降雨季节严格同步，其在凉爽的雨季通过老叶包裹内的新叶体生长，而在炎热的旱季则进入深度休眠，直至下一个雨季来临才蜕皮开花。此外，它们的花朵在午后开放，形似菊科植物，旨在吸引特定昆虫传粉，从而在严苛生境中保障繁殖成功率。',
    funFacts: '生石花的属名"Lithops"源自希腊语，意为"石头般的面容"。它们每年会"蜕皮"一次，新叶从老叶的缝隙中长出，吸收老叶的营养。生石花的花朵通常在下午开放，傍晚闭合，有些品种的花朵还带有香味。在原生地，生石花被称为"活石头"，连当地的动物都很难发现它们。',
    references: [
      "《多肉植物：茎干多肉植物图解手册》（戈登·罗利著），系统描述了生石花的形态、分类及其对干旱环境的适应机制。",
      "《植物生态学》等学术期刊中关于生石花拟态策略、水分生理及光周期调控的相关研究论文。",
      "南非开普植物区系研究文献，记录了生石花在原产地的群落分布、土壤特异性及其与气候周期的协同进化关系。"
    ]
  }
};

// 页面切换功能
document.addEventListener('DOMContentLoaded', function () {
  const mainPage = document.getElementById('main-page');
  const detailPage = document.getElementById('detail-page');
  const favoritesPage = document.getElementById('favorites-page');
  const backButton = document.querySelector('.back-button'); // 详情页返回按钮
  const favoritesBackButton = document.querySelector('.favorites-back-button'); // 收藏页返回按钮
  const viewFavoritesBtn = document.getElementById('view-favorites');
  const speciesCards = document.querySelectorAll('.species-card');
  const searchInput = document.getElementById('search-input');
  const filterButtons = document.querySelectorAll('.filter-btn');
  const loadingSpinner = document.getElementById('loading-spinner');
  const noResults = document.getElementById('no-results');
  const detailFavoriteBtn = document.getElementById('detail-favorite-btn');

  // 初始化收藏管理器
  const favoritesManager = new FavoritesManager();

  let currentFilter = 'all';
  let currentSearch = '';

  // 返回主页功能
  function backToMainPage() {
    mainPage.style.display = 'block';
    detailPage.style.display = 'none';
    favoritesPage.style.display = 'none';
    window.scrollTo(0, 0);
  }

  // 返回按钮功能（详情页）
  backButton.addEventListener('click', backToMainPage);

  // 返回按钮功能（收藏页）
  favoritesBackButton.addEventListener('click', backToMainPage);

  // 查看收藏按钮
  viewFavoritesBtn.addEventListener('click', function () {
    mainPage.style.display = 'none';
    detailPage.style.display = 'none';
    favoritesPage.style.display = 'block';
    favoritesManager.renderFavoritesPage();
    window.scrollTo(0, 0);
  });

  // 点击卡片显示详情页
  speciesCards.forEach(card => {
    card.addEventListener('click', function (e) {
      if (!e.target.closest('.favorite-btn')) {
        const speciesId = this.getAttribute('data-id');
        showDetailPage(speciesId);
      }
    });
  });

  // 收藏按钮点击事件
  document.querySelectorAll('.favorite-btn').forEach(btn => {
    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      const speciesId = this.getAttribute('data-id');
      favoritesManager.toggleFavorite(speciesId);
    });
  });

  // 详情页收藏按钮点击事件
  detailFavoriteBtn.addEventListener('click', function () {
    const speciesId = this.getAttribute('data-id');
    if (speciesId) {
      favoritesManager.toggleFavorite(speciesId);
    }
  });

  // 获取搜索按钮
  const searchBtn = document.getElementById('search-btn');

  // 按钮搜索功能
  searchBtn.addEventListener('click', function () {
    currentSearch = searchInput.value.toLowerCase().trim();
    filterSpecies();
  });

  // 回车键搜索功能
  searchInput.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      currentSearch = this.value.toLowerCase().trim();
      filterSpecies();
    }
  });

  // 搜索框清空时返回首页
  searchInput.addEventListener('input', function () {
    if (this.value === '') {
      currentSearch = '';
      backToMainPage();
    }
  });

  // 筛选功能
  filterButtons.forEach(button => {
    button.addEventListener('click', function () {
      // 更新激活状态
      filterButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      currentFilter = this.getAttribute('data-filter');
      filterSpecies();
    });
  });

  // 筛选物种函数
  function filterSpecies() {
    // 显示加载动画
    loadingSpinner.style.display = 'block';
    noResults.classList.remove('show');

    setTimeout(() => {
      let visibleCount = 0;

      speciesCards.forEach(card => {
        const name = card.getAttribute('data-name').toLowerCase();
        const category = card.getAttribute('data-category');

        const matchesSearch = currentSearch === '' || name.includes(currentSearch);
        const matchesFilter = currentFilter === 'all' || category === currentFilter;

        if (matchesSearch && matchesFilter) {
          card.classList.remove('hidden', 'fade-out');
          visibleCount++;
        } else {
          card.classList.add('fade-out');
          setTimeout(() => {
            card.classList.add('hidden');
          }, 400);
        }
      });

      // 隐藏加载动画
      loadingSpinner.style.display = 'none';

      // 显示/隐藏无结果提示
      if (visibleCount === 0) {
        noResults.classList.add('show');
      } else {
        noResults.classList.remove('show');
      }
    }, 300);
  }

  // 图片加载错误处理
  document.querySelectorAll('img').forEach(img => {
    img.addEventListener('error', function () {
      this.style.display = 'none';
      const placeholder = document.createElement('div');
      placeholder.className = 'placeholder';
      placeholder.textContent = '图片加载失败';
      this.parentNode.appendChild(placeholder);
    });

    // 图片懒加载模拟
    img.addEventListener('load', function () {
      this.style.opacity = '0';
      setTimeout(() => {
        this.style.transition = 'opacity 0.5s ease';
        this.style.opacity = '1';
      }, 100);
    });
  });

  // 显示详情页函数
  function showDetailPage(speciesId) {
    const species = speciesData[speciesId];

    if (species) {
      // 显示加载状态
      document.getElementById('detail-img').style.opacity = '0';

      // 更新详情页内容
      document.getElementById('detail-img').src = species.image;
      document.getElementById('detail-img').alt = species.name;
      document.getElementById('detail-name').textContent = species.name;
      document.getElementById('detail-scientific').textContent = species.scientific;
      document.getElementById('detail-description').textContent = species.description;
      document.getElementById('detail-habitat').textContent = species.habitat;
      document.getElementById('detail-fun-facts').textContent = species.funFacts;

      // 更新详情页收藏按钮
      detailFavoriteBtn.setAttribute('data-id', speciesId);
      if (favoritesManager.isFavorite(speciesId)) {
        detailFavoriteBtn.classList.add('active');
        detailFavoriteBtn.innerHTML = '<i class="fas fa-heart"></i><span>已收藏</span>';
      } else {
        detailFavoriteBtn.classList.remove('active');
        detailFavoriteBtn.innerHTML = '<i class="far fa-heart"></i><span>收藏</span>';
      }

      // 更新特征部分
      const featuresContainer = document.getElementById('detail-features');
      featuresContainer.innerHTML = '';

      species.features.forEach(feature => {
        const featureCard = document.createElement('div');
        featureCard.className = 'feature-card';
        featureCard.innerHTML = `
                    <h4>${feature.title}</h4>
                    <p>${feature.content}</p>
                `;
        featuresContainer.appendChild(featureCard);
      });

      // 更新参考资料部分
      const referencesContainer = document.getElementById('detail-references');
      referencesContainer.innerHTML = '';

      if (species.references && species.references.length > 0) {
        species.references.forEach(reference => {
          const referenceItem = document.createElement('div');
          referenceItem.className = 'reference-item';
          referenceItem.textContent = reference;
          referencesContainer.appendChild(referenceItem);
        });
      } else {
        const noRefMessage = document.createElement('p');
        noRefMessage.className = 'no-references';
        noRefMessage.textContent = '暂无参考资料';
        referencesContainer.appendChild(noRefMessage);
      }

      // 切换页面显示
      mainPage.style.display = 'none';
      detailPage.style.display = 'block';
      favoritesPage.style.display = 'none';

      // 滚动到顶部
      window.scrollTo(0, 0);

      // 图片加载完成后淡入
      document.getElementById('detail-img').addEventListener('load', function () {
        this.style.transition = 'opacity 0.5s ease';
        this.style.opacity = '1';
      });
    }
  }

  // 添加页面加载动画
  const intro = document.querySelector('.intro p');
  intro.style.opacity = '0';
  intro.style.transition = 'opacity 1s ease';

  setTimeout(() => {
    intro.style.opacity = '1';
  }, 300);

  // 初始筛选
  filterSpecies();

  // 初始化收藏UI状态
  favoritesManager.updateUI();
});

// 收藏管理功能
class FavoritesManager {
  constructor() {
    this.favorites = JSON.parse(localStorage.getItem('speciesFavorites')) || [];
    // 定义植物物种ID列表
    this.plantSpecies = ['angraecum', 'dandelion', 'lithops'];
  }

  // 切换收藏状态
  toggleFavorite(speciesId) {
    const index = this.favorites.indexOf(speciesId);

    if (index > -1) {
      // 如果已收藏，则取消收藏
      this.favorites.splice(index, 1);
    } else {
      // 如果未收藏，则添加收藏
      this.favorites.push(speciesId);
    }

    // 保存到本地存储
    this.saveToLocalStorage();

    // 更新UI
    this.updateUI();

    return !(index > -1); // 返回新的收藏状态
  }

  // 检查是否已收藏
  isFavorite(speciesId) {
    return this.favorites.includes(speciesId);
  }

  // 获取收藏列表
  getFavorites() {
    return this.favorites;
  }

  // 获取收藏数量
  getCount() {
    return this.favorites.length;
  }

  // 保存到本地存储
  saveToLocalStorage() {
    localStorage.setItem('speciesFavorites', JSON.stringify(this.favorites));
  }

  // 判断物种分类
  getSpeciesCategory(speciesId) {
    return this.plantSpecies.includes(speciesId) ? 'plant' : 'animal';
  }

  // 更新所有收藏按钮的UI状态
  updateUI() {
    // 更新主页面卡片收藏按钮
    document.querySelectorAll('.favorite-btn').forEach(btn => {
      const speciesId = btn.getAttribute('data-id');
      if (this.isFavorite(speciesId)) {
        btn.classList.add('active');
        btn.innerHTML = '<i class="fas fa-heart"></i>';
      } else {
        btn.classList.remove('active');
        btn.innerHTML = '<i class="far fa-heart"></i>';
      }
    });

    // 更新详情页收藏按钮
    const detailBtn = document.getElementById('detail-favorite-btn');
    if (detailBtn.getAttribute('data-id')) {
      const detailSpeciesId = detailBtn.getAttribute('data-id');
      if (this.isFavorite(detailSpeciesId)) {
        detailBtn.classList.add('active');
        detailBtn.innerHTML = '<i class="fas fa-heart"></i><span>已收藏</span>';
      } else {
        detailBtn.classList.remove('active');
        detailBtn.innerHTML = '<i class="far fa-heart"></i><span>收藏</span>';
      }
    }

    // 更新收藏页面
    this.renderFavoritesPage();
  }

  // 渲染收藏页面
  renderFavoritesPage() {
    const favoritesContainer = document.getElementById('favorites-container');
    const emptyFavorites = document.getElementById('empty-favorites');
    const favoritesCount = document.getElementById('favorites-count');

    // 更新收藏数量
    favoritesCount.textContent = this.getCount();

    // 清空容器
    favoritesContainer.innerHTML = '';

    // 根据收藏数量设置特殊样式类
    favoritesContainer.classList.remove('single-item');
    if (this.favorites.length === 1) {
      favoritesContainer.classList.add('single-item');
    }

    if (this.favorites.length === 0) {
      // 显示空状态
      emptyFavorites.classList.add('show');
      return;
    }

    // 隐藏空状态
    emptyFavorites.classList.remove('show');

    // 渲染收藏的卡片
    this.favorites.forEach(speciesId => {
      const species = speciesData[speciesId];
      if (species) {
        const card = this.createFavoriteCard(speciesId, species);
        favoritesContainer.appendChild(card);
      }
    });
  }

  // 创建收藏卡片
  createFavoriteCard(speciesId, species) {
    const card = document.createElement('div');
    card.className = 'species-card';
    card.setAttribute('data-id', speciesId);

    // 判断分类
    const category = this.getSpeciesCategory(speciesId);
    card.setAttribute('data-category', category);
    card.setAttribute('data-name', species.name);

    card.innerHTML = `
            <button class="favorite-btn active" data-id="${speciesId}">
                <i class="fas fa-heart"></i>
            </button>
            <div class="species-image">
                <img src="${species.image}" alt="${species.name}" loading="lazy">
            </div>
            <div class="species-content">
                <span class="category-label ${category}">
                    ${category === 'plant' ? '植物' : '动物'}
                </span>
                <h2 class="species-name">${species.name}</h2>
                <p class="scientific-name">${species.scientific}</p>
                <p class="species-description">${species.description}</p>
            </div>
        `;

    // 添加收藏按钮事件
    const favoriteBtn = card.querySelector('.favorite-btn');
    favoriteBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      this.toggleFavorite(speciesId);
    });

    return card;
  }
}